<template>
    <div style="height:100%;">
        <navbar :title="this.$route.query.title" ></navbar>
        <div class="content" style="padding-bottom: 56px;">
            <div class="modal-title-box">{{ $t('training_schedule') }}</div>
            <!-- 列表数据 -->
            <div style="height: 100%;" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getList"
                    style="padding-bottom: 56px;"
                    >
                        <div class="box2" v-bind:class="{'height100' : total === 0}">
                            <div v-for="(item, index) in dataList" :key="index" class="list-item">
                                <div class="item-text">
                                    <div class="base-info">
                                        <div class="user-group">
                                            <i class="iconfont icon-xiezuo-richeng-xiangqing-zhuti"></i>
                                        </div>
                                        <div class="name">{{item.ilsTitle || '--'}}</div>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-jiaoshi"></i>
                                        <template v-if="item.instructorList.length > 0">
                                            <span v-for="(itx, i) in item.instructorList" :key="i">
                                                {{ itx.usrDisplayBil }}
                                            </span>
                                        </template>
                                        <template v-else>--</template>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-w_time"></i>
                                        <span>
                                            {{ item.ilsStartTime ? item.ilsStartTime : '--' }}
                                            {{$t('time_to')}}
                                            {{ item.ilsEndTime ? item.ilsEndTime.split(' ')[1].substring(0, item.ilsStartTime.split(' ')[1].lastIndexOf(':')) : '--' }}
                                        </span>
                                    </div>
                                    <div  class="appovel-title">
                                        <i class="iconfont icon-jiaoshi1"></i>
                                        <span>{{item.ilsPlace}}</span>
                                    </div>
                                </div>
                                <div class="button-box">
                                    <div v-if="item.ilsStatus===0" class="pass-btn" @click="handleAllow(item.ilsId)">{{ $t('btn_publish') }}</div>
                                    <div v-else class="refuse-btn" @click="handleRefuse(item.ilsId)">{{ $t('cancel_publish') }}</div>
                                    <div class="pass-btn" v-if="item.ilsStatus===1 && item.showInQRCode" style="margin-left: 10px;" :class="lang === 'en' ? 'enStyle' : ''" @click="getCode('checkIn', item.ilsId)">{{ $t('sign_code') }}</div>
                                    <div class="pass-btn" v-if="item.ilsStatus===1 && item.showOutQRCode" style="margin-left: 10px;" :class="lang === 'en' ? 'enStyle' : ''" @click="getCode('checkOut', item.ilsId)">{{ $t('sign_off_code') }}</div>
                                    <div class="pass-btn" v-if="item.ilsStatus===1" style="margin-left: 10px;" :class="lang === 'en' ? 'enStyle' : ''" @click="$router.push(`/attendanceRecord/?id=${item.ilsId}`)">{{ $t('attendance_ecord') }}</div>
                                </div>
                            </div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <!-- 确定发布吗？ -->
        <van-dialog
        v-model="comfirmModal"
        show-cancel-button
        :title="$t('sure_pass_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleAllowComfirm"
        >
        </van-dialog>
        <van-dialog
        v-model="refuseComfirmModal"
        show-cancel-button
        :title="$t('sure_refuse_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleRefuseComfirm"
        >
        </van-dialog>
        <!-- 签到码 -->
        <van-dialog
        v-model="showCode"
        show-cancel-button
        :showConfirmButton=false
        :title="codeTitle"
        :cancelButtonText="$t('button_close')"
        >
        <div style="text-align: center;height: 150px;">
            <van-image v-if="codeUrl" width="150" height="150" :src="appUrl + codeUrl"/>
        </div>
        </van-dialog>
    </div>
  </template>

<script>
import CommonLoading from '@/components/common/loading';
import { Tab, Tabs, Toast } from 'vant';
export default {
    name: 'trainingSchedule',
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        CommonLoading,
        vanToast: Toast
    },
    data() {
        return {
            dataList: [],
            comfirmModal: false,
            refuseComfirmModal: false,
            showCode: false,
            codeUrl: '',
            curItemId: null,
            isLoading: true,
            pageData: {
                pageNo: 1,
                pageSize: 5,
                searchText: '',
                itmId: this.$route.query.itmId
            },
            isTop: false,
            onFetching: false,
            total: 0,
            finished: false,
            isRefresh: false,
            codeTitle: '',
            lang: this.$i18n.locale
        };
    },
    mounted() {
        this.getList('refresh');
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getList(option) {
            this.isLoading = true;
            this.$axios.get(`/app/api/course/lesson/list`, {params: this.pageData}).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    } else {
                        this.dataList = this.dataList.concat(res.data.results);
                    }
                } else {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.dataList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        checkTab() {
            // this.pageData.pageNo = 1;
            // this.getList('refresh');
        },
        backFun() {
            this.$router.go(-1);
        },
        getCode(type, ilsId) {
            this.showCode = true;
            this.codeUrl = '';
            if (type === 'checkIn') {
                this.codeTitle = this.$t('sign_code');
                this.$axios.get(`/app/api/course/lesson/clock-in-code/${ilsId}`).then((res) => {
                    this.codeUrl = res.data.errCode;
                });
            } else {
                this.codeTitle = this.$t('sign_off_code');
                this.$axios.get(`/app/api/course/lesson/clock-out-code/${ilsId}`).then((res) => {
                    this.codeUrl = res.data.errCode;
                });
            }
        },
        // 发布单行
        handleAllow(ilsId) {
            this.comfirmModal = true;
            this.curItemId = ilsId;
        },
        // 发布单行再次确认
        handleAllowComfirm() {
            const data = {
                content: '',
                ilsId: [this.curItemId],
                itmId: this.$route.query.itmId,
                notify: false
            };
            this.$axios.post(`/app/api/course/lesson/pub`, data).then((res) => {
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.comfirmModal = false;
                Toast({message: this.$t('opreat_successs'), forbidClick: true});
            });
        },
        // 取消发布单行
        handleRefuse(ilsId) {
            this.refuseComfirmModal = true;
            this.curItemId = ilsId;
        },
        // 取消发布单行再次确认
        handleRefuseComfirm() {
            this.$axios.get(`/app/api/course/lesson/unpub/${this.curItemId}`).then((res) => {
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.refuseComfirmModal = false;
                Toast({message: this.$t('opreat_successs'), forbidClick: true});
            });
        }
    }
};
</script>

<style scoped lang='less'>
.header-left-title{
    line-height: 58px;
    font-size: 19px;
    color: #1B1B1B;
    padding-left: 52px;
}
.head-icon {
    font-size: 25px;
    margin: 17px 0 0 11px;
}
.modal-title-box{
    height: 44px;
    line-height: 44px;
    background: white;
    color: #075EBB;
    font-size: 15px;
    // padding-left: 15px;
    text-align: center;
}
.list-item{
    background: white;
    border-radius: 3px;
    margin: 15px;
    padding: 15px 20px 40px;
    position: relative;
    .item-text{
        .base-info{
            display: flex;
            // justify-content: space-between;
          align-items: center;
            margin-bottom: 20px;
            .name{
                font-size: 15px;
                color: #333333;
                width: 80%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                line-clamp: 2;
                // height: 40px;
            }
            .user-group{
                font-size: 12px;
                margin-right: 15px;
                i{
                color: #075EBB;
                }
            }
        }
        .appovel-title{
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            i{
                color: #C9C9C9;
                font-size: 18px;
            }
            span{
                margin-left: 8px;
                font-size: 12px;
                color: #666666;
                text-wrap: nowrap;
                text-overflow: ellipsis;
                width: 90%;
                display: inline-block;
                overflow: hidden;
            }
        }
    }
    .button-box{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        bottom: 15px;
        right: 20px;
        div{
                font-size: 14px;
                border-radius: 3px;
                display: inline-block;
                width: 72px;
                height: 31px;
                text-align: center;
                line-height: 31px;
                box-sizing: border-box;
        }
        .pass-btn{
            border: 1px solid #075EBB;
            color: #075EBB;
        }
        .refuse-btn{
            margin-left: 15px;
            border: 1px solid #E63442;
            color: #E63442;
        }
    }
}
.code-img{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
}
/deep/.van-dialog__content {
    padding: 0;
}
.enStyle {
    line-height: normal !important;
}
</style>
